<!--
 * @Author: Liu
 * @Date: 2023-05-08 10:52:26
 * @LastEditTime: 2023-05-08 17:28:40
-->
<template>
    <div class="popover-box" v-if="props.isShow">
      <div :class="['popover-content', 'dialog-inner', props.isShow && 'scale-in-center']">
        <div v-if="props.title" class="title">{{ props.title }}</div>
        <div v-if="props.icon" class="icon"><img :src="props.icon" alt="" /></div>
       
        <div class="popover-data"><slot /></div>
        
        <!-- <div class="tips" v-if="tips"><span>*可前往我的奖品页面查看获奖明细</span></div> -->
        <!-- <div class="footer" v-if="showShare">
          <div class="btn" role="button" @click="props.showShare ? $emit('showShareModal') :$emit('handleClose')">确&nbsp;&nbsp;认</div>
          <div class="btn" role="button" @click="$emit('showShareModal')">去邀请</div>
        </div> -->
        <div class="footer">
          <div class="btn" role="button" @click="$emit('handleClose')">确&nbsp;认</div>
        </div>
      </div>
  
    </div>
  </template>
  
  <script setup>
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      // default: '恭喜您'
    },
    icon: {
      type: String
    },
    tips: {
      type: Boolean,
    },
    getRemainGameNum: {
      type: Number
    },
    showShare: {
      type: Boolean
    }
  })
  
  </script>
  <style lang="scss"  scoped>
  .popover-box {
    position: fixed;
    z-index: 100;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "ChangAnunitype-Bold";
    top: 0;
  
  }
  
  .popover-content {
    width: 606px;
    min-height: 397px;
    padding: 50px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* justify-content: center; */
    border-radius: 30px;
    text-align: center;
    &::before {
        content: ' ';
        position: absolute;
        width: 84%;
        height: 28%;
        top: 50px;
        background-image: url(#{$base_path}/images/success-title.png);
        background-repeat: no-repeat;
        background-size: cover;
    }
    &.dialog-inner {
        background-image: url(#{$base_path}/images/result-modal-bg.png);
        .title {
            margin-top: 0;
        }
        .footer {
            position: static;
        }
    }
  }
  
  .icon {
    display: flex;
    justify-content: center;
    padding: 10px 0 15px 0;
  }
  
  .icon > img {
    max-width: 30%;
  }
  
  .tips {
    color: #999;
    font-size: 20px;
    font-family: "ChangAnunitype-Regular";
  }
  
  .popover-bg {
    width: 100%;
    height: 100%;
  }
  
  .bell_bg {
    position: absolute;
    width: 119px;
    height: 118px;
    top: -60px;
  }
  
  .bell {
    position: absolute;
    width: 61px;
    height: 62px;
    top: -30px;
  
  }
  
  .popover-data {
    font-family: "ChangAnunitype-Bold";
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    // color: #3880f5;
    letter-spacing: 2px;
    font-weight: 900;
    margin: 20px 0;
  }
  .title {
    color: #3880f5;
  }
  .popover-content {
    /* background: url(/images/prize-modal.png); */
    background-size: 100% 100%;
  }
  
  .footer .btn {
    /* background: linear-gradient(180deg, #91d8ff, #4e81e9); */
    width: 200px;
    border-radius: 50px;
  }
  .footer .btn+.btn {
    margin-left: 40px;
  }
  </style>